import React, { Component } from 'react'
import { List, InputItem, Picker, Button, TextareaItem } from 'antd-mobile'
import { observer } from 'mobx-react/custom'
import AddProjectVM from 'cvm/addProject/addProject'
import './addProject.less'

const AddProjectList = observer(({ vm }) => {
  const item = vm.editData
  return (
    <div>
      {
        vm.addressList.length === 31 &&
        <div className='add-project'>
          <p className='information-title'>客户基本信息</p>
          <List style={{ backgroundColor: 'white' }} className='picker-list' id='picker-list'>
            <InputItem
              placeholder='必须填写公司全称'
              clear
              maxLength='18'
              onChange={(v) => vm.onChange(v, 'CompanyName')}
              editable='true'
              defaultValue={item.CompanyName}
            >公司名称</InputItem>
            <InputItem
              placeholder='真实姓名'
              clear
              maxLength='8'
              onChange={(v) => vm.onChange(v, 'UserName')}
              defaultValue={item.LinkName}
            >联系人</InputItem>
            <InputItem
              placeholder='真实手机号码'
              clear
              type='phone'
              id='phone'
              onChange={(v) => vm.onChange(v, 'UserNumber')}
              onBlur={(v) => vm.phoneCodeValid(v)}
              defaultValue={item.LinkPhone}
            >手机号
        </InputItem>
            {
              vm.cityCode.length > 1 ? <div id='city' className='addressStyle'>
                <Picker
                  extra='公司所在地区信息'
                  data={vm.addressList}
                  value={vm.cityCode}
                  onOk={(v) => vm.onChange(v, 'CityCode')}
                  onDismiss={e => console.log('dismiss', e)}
                >
                  <List.Item arrow='horizontal'>选择地区</List.Item>
                </Picker>
              </div> : <div id='city' className={vm.addressStyle}>
                <Picker
                  extra='公司所在地区信息'
                  data={vm.addressList}
                  value={vm.cityCode}
                  onOk={(v) => vm.onChange(v, 'CityCode')}
                  onDismiss={e => console.log('dismiss', e)}
                >
                  <List.Item arrow='horizontal'>选择地区</List.Item>
                </Picker>
              </div>
            }
            <TextareaItem
              title='详细地址'
              placeholder='街道、大厦门牌号'
              maxLength={30}
              rows={3}
              onChange={(v) => vm.onChange(v, 'AddressDetail')}
              className='textarea-box'
              defaultValue={item.Address}
            />
          </List>
          <p className='information-title'>初期采购</p>
          <List style={{ backgroundColor: 'white' }} className='picker-list count-box' id='change-length'>
            <InputItem
              placeholder='实际购买天数'
              maxLength='6'
              type='number'
              onChange={(v) => vm.onChange(v, 'ByDays')}
              defaultValue={item.Service}
             >服务时长</InputItem>
            {/* <span className='price-position'>{vm.byDays}</span> */}
            <InputItem
              placeholder='实际交易金额'
              maxLength='9'
              type='number'
              onChange={(v) => vm.onChange(v, 'ByDaysTotal')}
              defaultValue={item.ServiceTotal}
             >时长总额</InputItem>
            <InputItem
              placeholder='实际购买个数'
              maxLength='6'
              type='number'
              onChange={(v) => vm.onChange(v, 'ByCount')}
              defaultValue={item.Video}
            >摄像机</InputItem>
            {/* <span className='price-position'>{vm.byCount}</span> */}
            <InputItem
              placeholder='实际交易金额'
              maxLength='9'
              type='number'
              onChange={(v) => vm.onChange(v, 'ByCountTotal')}
              defaultValue={item.VideoTotal}
            >摄像机总额</InputItem>
            <InputItem
              placeholder='实际购买张数'
              maxLength='6'
              type='number'
              onChange={(v) => vm.onChange(v, 'BySheets')}
              defaultValue={item.Memory}
            >内存卡</InputItem>
            {/* <span className='price-position'>{vm.bySheets}</span> */}
            <InputItem
              placeholder='实际交易金额'
              maxLength='9'
              type='number'
              onChange={(v) => vm.onChange(v, 'BySheetsTotal')}
              defaultValue={item.MemoryTotal}
            >内存卡总额</InputItem>
            <InputItem
              className='total-money'
              defaultValue={item.Memory}
            >合计金额<span className='price-total price-position'>{vm.total}</span></InputItem>
          </List>
          <div className='btn-box'>
            <Button type='primary' onClick={() => vm.handleSubmitProject('submit')}>提交项目</Button>
            <Button onClick={() => vm.handleSaveProject('save')}>保存为洽谈中的项目</Button>
          </div>
        </div>
      }
    </div>
  )
})

@observer
class addProject extends Component {
  constructor (props) {
    super(props)
    this.vm = new AddProjectVM(props)
    window.document.title = '添加项目'
  }
  render () {
    return (
      <div>
        <AddProjectList vm={this.vm} />
      </div>
    )
  }
}

export default addProject
